<script lang="ts" setup>
import { ref } from 'vue';
import { useLocale } from '@/locale/locale';

const { t } = useLocale();
const data = ref([
  {
    title: t('LHTKey_roomWifi'),
    icon: '/static/icon_wifi.png',
    items: [t('LHTKey_roomWife')]
  },
  {
    title: t('LHTKey_roomToiletry'),
    icon: '/static/icon_toiletries.png',
    items: [
      t('LHTKey_roomTowel'),
      t('LHTKey_roomBathTowel'),
      t('LHTKey_roomToothbrush'),
      t('LHTKey_roomToothpaste'),
      t('LHTKey_roomGargleCup'),
      t('LHTKey_roomSlipper'),
      t('LHTKey_roomCleaningProducts'),
      t('LHTKey_roomLiquidSoap')
    ]
  },
  {
    title: t('LHTKey_roomKitchenSupplies'),
    icon: '/static/icon_kitchenware.png',
    items: [t('LHTKey_roomMicrowaveOven'), t('LHTKey_roomKitchenExhaustFan')]
  },
  {
    title: t('LHTKey_roomGuestRoomFacilities'),
    icon: '/static/icon_washing_machine.png',
    items: [
      t('LHTKey_roomTelevision'),
      t('LHTKey_roomAirConditioner'),
      t('LHTKey_roomWashingMachine'),
      t('LHTKey_roomHeating'),
      t('LHTKey_roomFireExtinguisher'),
      t('LHTKey_roomSmokeDetector')
    ]
  },
  {
    title: t('LHTKey_roomDidNot'),
    icon: '/static/icon_shower.png',
    items: [
      t('LHTKey_roomHotWater'),
      t('LHTKey_roomBathroom'),
      t('LHTKey_roomClosestool'),
      t('LHTKey_roomHairDrier'),
      t('LHTKey_roomSlipper')
    ]
  },
  {
    title: t('LHTKey_roomSoftDrinks'),
    icon: '/static/icon_tableware.png',
    items: [t('LHTKey_roomChopsticks')]
  }
]);
</script>

<template>
  <apt-section :title="t('LHTKey_roomAmenities')" custom-style="margin-bottom: 20rpx">
    <view v-for="cell in data" :key="cell.title" class="room-amenities__cell">
      <view class="room-amenities__cell-before">
        <image :src="cell.icon" class="room-amenities__cell-icon" />
        <text class="room-amenities__cell-title">{{ cell.title }}</text>
      </view>
      <view class="room-amenities__cell-after">
        <view v-for="item in cell.items" :key="item" class="room-amenities__cell-item">
          {{ item }}
        </view>
      </view>
    </view>
  </apt-section>
</template>

<style lang="scss">
.room-amenities__cell {
  display: flex;
  align-items: center;
  padding: 20rpx 0 32rpx;

  &-before {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 150rpx;
    margin-right: 58rpx;
  }

  &-icon {
    width: 44rpx;
    height: 44rpx;
    margin-bottom: 4rpx;
  }

  &-title {
    font-weight: 500;
    font-size: 24rpx;
    line-height: 34rpx;
    color: #3d3d3d;
  }

  &-after {
    flex: 1;
    display: flex;
    flex-wrap: wrap;
  }

  &-item {
    min-width: 50%;
    margin: 12rpx 0;
    font-size: 24rpx;
    line-height: 34rpx;
    color: #3d3d3d;
  }

  & + & {
    border-top: 2rpx solid #f4f4f4;
  }
}
</style>
